<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>登录&注册</title>
    <link rel="stylesheet" href="/gzht/statics/css/style.css"/>
    <link rel="stylesheet" href="/gzht/statics/css/common.css"/>
    <style>
        .btn-form{
            display: inline-block;
            width: 9rem;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
            box-shadow: 1px 1px 3px gray;
            font-size: 1.2rem;
        }
        .checked{
            color: white;
            background-color: #49a1fa;
        }
        .unchecked{
            color: #49a1fa;
            background-color: white;
        }
    </style>
</head>
<body>
<!--head-->
<div class="head clearfix">
    <img src="/gzht/statics/img/logo.png" class="logo">
</div>

<!--head end-->
<div class="login_bg">
    <div class="w1200">
        <div class="login">
            <div class="title">欢迎来到<b>井管设计系统</b></div>
            <div class="login_tab">
                <span class="cur"></span>
                <span></span>
            </div>
            <div class="_con">
                <form id="login_form" class="input">
                    <div class="lg_nei">
                        <ul>
                            <li class="clearfix"><img src="/gzht/statics/img/user.png"><input id="username" type="text"
                                                                                              name="username"
                                                                                              placeholder="请输入用户名"></li>
                            <li class="clearfix"><img src="/gzht/statics/img/password.png"><input id="password" type="password"
                                                                                                  name="password"
                                                                                                  placeholder="请输入登录密码">
                            </li>
                        </ul>
                        <div><label><input id="rememberMe" type="checkbox" name="rememberMe" value="1">记住我</label><a
                                href="/gzht/statics/">忘记密码？</a></div>
                    </div>
                </form>
                <form id="regist_form" class="input" style="display: none;">
                    <div class="lg_nei">
                        <ul>
                            <li class="clearfix"><img src="/gzht/statics/img/user.png"><input type="text" id="r_username"
                                                                                              placeholder="请输入数字和字母组合的6位数用户名">
                            </li>
                            <li class="clearfix"><img src="/gzht/statics/img/password.png"><input type="password" id="r_password"
                                                                                                  placeholder="请输入密码">
                            </li>
                            <li class="clearfix"><img src="/gzht/statics/img/password.png"><input type="password" id="r_confirm_password"
                                                                                                  placeholder="请确认密码">
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="btn clearfix form-btns">
                <a href="javascript:void(0);" class="form_btn btn-form checked">
                    <div>登&nbsp;&nbsp;录</div>
                </a>
                <a href="javascript:void(0);" class="form_btn btn-form">
                    <div>注&nbsp;&nbsp;册</div>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/gzht/statics/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="/gzht/lib/layer/layer.js"></script>
<script>
    var w_height = $(window).height() - 55 + "px";
    $(".login_bg").css("height", w_height);

    var url = window.location.href;
    if (url.indexOf('kickout') != -1) {
        var index = layer.open({
            type: 1,
            title: false,
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: '<div style="width: 100%;height: 100%;display: flex;align-items: center;font-size: 1rem; font-weight: bold;text-align: center;color:red;">您的账号在别处登录，您已被迫下线，若非您本人授权操作，请立即更改密码！</div>'
        });
        layer.show(index)
    }

    //tab切换
    $('body .form_btn').on('mouseover', function () {
        var _index = $(this).index();
        $('.login_tab span').eq(_index).addClass("cur").siblings().removeClass("cur");
        $("._con .input").eq(_index).show().siblings().hide();
        $('.form-btns a').eq(_index).addClass("checked").siblings().removeClass('checked');
    }).on('click', function () {
        var _index = $(this).index();
        if (_index == 0) {
            // 登录
            // var fomrData = new FormData($("#login_form")[0]);
            var data = {
                'username': $('#username').val(),
                'password': $('#password').val(),
                'rememberMe': $('#rememberMe').val()
            }
            $.ajax({
                url: '/gzht/doLogin',
                data: JSON.stringify(data),
                type: 'post',
                contentType: 'application/json',
                // async: false,
                // cache: false,
                // contentType: false,
                // processData: false,
                success: function (res) {
                    if(res.code == 1002){
                        // 登录成功
                        window.location.replace("/gzht/index");
                    }else {
                        layer.msg('账号或密码错误')
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        } else if (_index == 1) {
            // 注册
            var username = $("#r_username").val();
            var password = $("#r_password").val();
            var confirm_pwd = $("#r_confirm_password").val();
            if(/^[0-9a-zA-z]{6}$/.test(username)){
                if(/^[0-9a-zA-Z]{6,12}$/.test(password)){
                    if(password == confirm_pwd){
                        var regData = {};
                        regData.username = username;
                        regData.password = password;
                        regData.pwdConfirm = confirm_pwd;
                        $.ajax({
                            url: '/gzht/doRegist',
                            data: JSON.stringify(regData),
                            type: 'post',
                            contentType: 'application/json',
                            success: function (res) {
                                console.log(res)
                                if(res.code == 1001){
                                    layer.msg('注册成功，请登录',{
                                        icon: 1
                                    })
                                }else {
                                    layer.msg(res.desc)
                                }
                            }
                        })
                    }else {
                        layer.msg("密码与确认密码不一致")
                    }
                }else {
                    layer.msg("密码需为6-12位数字字母组合")
                }
            }else {
                layer.msg('用户名不符合规范')
            }
        }
    })
</script>
</html>
